////
/// Components
/// Sidebar
////

@import 'utils/shared/layout';
@import 'components/MobileNav/props';

.Sidebar {
  @include position-cover;
  z-index: get-z-index(sidebar);
  background-color: get-color(coal, dark);
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;

  @media screen and (max-width: get-breakpoint() - 1px) {
    text-align: center;
    transition: opacity get-duration() get-easing(), visibility get-duration() get-easing();

    &::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      display: block;
      height: $mobile-nav-padding-top;
      background: linear-gradient(
        rgba(get-color(coal, dark), 0.9) 40%,
        rgba(get-color(coal, dark), 0)
      );
    }

    // protect against resizing visibility
    &[aria-hidden='undefined'] {
      display: none;
    }

    &[aria-hidden='true'] {
      @include visible(false);
    }
  }

  @media screen and (min-width: get-breakpoint()) {
    position: fixed;
    right: auto;
    display: flex; // for sticky footer
    flex-direction: column; // for sticky footer
    width: get-layout-length(sidebar);
  }
}

.SidebarHeader {
  padding: $mobile-nav-padding-top get-spacing(tight) get-spacing(tight);

  @media screen and (min-width: get-breakpoint()) {
    padding-top: get-spacing(looser);
  }

  @media screen and (min-width: get-breakpoint(desktop)) {
    padding-top: get-spacing(fat);
    padding-right: get-spacing(loose);
    padding-left: get-spacing(loose);
  }
}

.SidebarFooter {
  padding: get-spacing(loose) get-spacing(tight);

  @media screen and (min-width: get-breakpoint(desktop)) {
    padding: get-spacing(fat) get-spacing(loose);
  }
}

.LegalText {
  font-size: get-type-scale(footer);
  font-weight: get-type-scale(footer, weight);
  line-height: get-type-scale(footer, leading);
  color: white;

  & + & {
    margin-top: get-spacing(tighter);
  }

  @media screen and (max-width: get-breakpoint() - 1px) {
    margin-left: auto;
    margin-right: auto;
    max-width: get-layout-length(sidebar);
  }
}
